<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>手机号认证</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta name="msapplication-TileColor" content="#0e90d2">
    <script src="/config.js"></script>
    <link rel="stylesheet" href="/hall/game/js/amazeui.min.css">

    <style>
        html {
            font-size: 10px;
        }

        html,
        body {
            background-color: #f0eff4;
        }

        body {
            padding-bottom: 0;
            margin: 0;
        }

        * {
            padding: 0;
            margin: 0;
        }

        header {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 49px;
            background-color: #333;
            color: #fff;
        }

        header p {
            margin: 0;
            line-height: 49px;
            font-size: 16px;
            text-align: center;
        }

        .register {
            padding: 8px 6px;
            font-size: 14px;
        }

        .res-item {
            position: relative;
            width: 100%;
            border-radius: 4px;
            margin-bottom: 8px;
            background-color: #fff;
        }

        .res-icon {
            position: absolute;
            left: 8px;
            top: 5px;
            z-index: 100;
            display: inline-block;
            font-size: 18px;
            color: #9c9c9c;
        }

        .res-item .input-item {
            display: inline-block;
            width: 100%;
            padding-left: 10px;
            height: 40px;
            line-height: 40px;
            border: none;
            font-size: inherit;
        }

        .res-item .input-item:focus {
            outline-offset: 0;
            outline: -webkit-focus-ring-color auto -2px;
            background-color: #fefffe;
            border: 1px solid #e21945;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px rgba(226, 25, 69, .3);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px rgba(226, 25, 69, 0.3);
        }

        .res-item .input-item:focus+.res-icon {
            color: #e21945;
        }

        .yanzhengma {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 100;
            display: inline-block;
            font-size: 14px;
            border: none;
            background-color: rgba(255, 0, 0, 0);
            color: #ED6A5E;
            border-radius: 8px;
        }

        .yzmcolor {
            color: #9D9D9C;
        }

        /*.yanzhengma:disabled { background-color: #ddd; }*/
        .res-btn {
            margin-top: 10px;
        }

        .res-btn button {
            background-color: #ED6A5E;
            font-size: 16px;
            color: #fff;
            border-radius: 8px;
            line-height: 2.2;
        }

        .res-btn button:focus {
            color: #fff;
        }

        .res-btn button.glay {
            background-color: #868686
        }

        .gettxt {
            font-size: 12px;
            color: #999;
            margin-left: 10px;
        }

        .explian {
            margin-top: 10px;
            padding: 0 5px;
        }

        .explian h5 {
            text-align: center;
            margin: 0;
            margin-bottom: 15px;
            font-size: 16px;
        }

        .explian ul,
        p {
            padding: 0;
            margin: 0;
            margin-bottom: 15px;
            font-size: 16px;
        }

        #kfcode {
            color: red;
        }
    </style>
    <script type="text/javascript" src="/misc/js/vconsole.min.js"></script>
</head>

<body>
<!--  <header>
    <p>手机号认证</p>
</header> -->
<div class="register" id="register" style="display: none;">
    <div class="res-item">
        <div class="input-item yanzheng">用户ID</div>
        <div class="yanzhengma yzmcolor" id="yzmid"></div>
    </div>
    <div class="res-item">
        <div class="input-item yanzheng">用户昵称</div>
        <div class="yanzhengma yzmcolor" id="yzmname"></div>
    </div>
    <div class="res-item">
        <input type="number" placeholder="请填写手机号码" class="input-item mobile">
    </div>
    <div class="res-item">
        <input type="number" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请填写验证码" id="yanzheng"
               class="input-item yanzheng">
        <button type="button" id="yanzhengma" class="yanzhengma">发送验证码</button>
    </div>
    <span class="gettxt">点击获取验证码后，我们会通过手机短信将验证码发送给您</span>
    <div class="res-btn">
        <button type="button" id="putres" class="am-btn am-btn-block">认证</button>
    </div>


</div>


<div class="register" id="allget" style="display: none;">
    <div class="res-item">
        <div class="input-item yanzheng">用户ID</div>
        <div class="yanzhengma yzmcolor" id="getyzmid"></div>
    </div>
    <div class="res-item">
        <div class="input-item yanzheng">用户昵称</div>
        <div class="yanzhengma yzmcolor" id="getyzmname"></div>
    </div>
    <div class="res-item">
        <div class="input-item yanzheng">电话号码</div>
        <div class="yanzhengma yzmcolor" id="yzmphone"></div>
    </div>
    <div class="res-btn">
        <button type="button" id="allput" disabled="disabled" class="am-btn am-btn-block glay">已认证</button>
    </div>
    <div class="res-btn">
        <button type="button" id="res-btn" class="am-btn am-btn-block">手机号修改</button>
    </div>
</div>

<div class="explian">
    <h5>认证说明</h5>
    <ul>
        <li>1.在微信端完成认证后，在其他任意环境即可以使用该手机号登录进入游戏。</li>
        <li>2.在此处认证的手机号和在其他环境登录的手机号需要保持一致。</li>
        <li>3.认证成功后，可以在该页面重新修改认证手机号。</li>
        <li>4.在认证过程有任何疑问请及时联系客服咨询解决。</li>
        <li>5.进入页面后，如果无法显示您的信息，请退出清理微信缓存后再次进入。</li>
    </ul>
    <p>客服微信：<span id="kfcode"></span></p>
</div>
<script src="/qipaiRecord/js/rem.js" type="text/javascript" charset="utf-8"></script>
<script src="/qipaiRecord/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/qipaiRecord/js/jquery.cookie.js" type="text/javascript"
        charset="utf-8"></script>
<script src="/qipaiRecord/js/tools.js" type="text/javascript" charset="utf-8"></script>
<script src="/hall/game/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/hall/game/js/gameconfig.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var vConsole = new VConsole();
    var baseUrl = location.protocol + '//' + 'user2.51fpyx.cn';
    var host = location.host.split("-");
    if (host.length > 1) {
        if (host[0] == 'alpha' || host[0] == 'beta') {
            baseUrl = location.protocol + '//' + host[0] + '-uc.fpwan.com';
        } else {
            baseUrl = location.protocol + '//' + 'uc.fpwan.com';
        }

    } else {
        if (host[0].indexOf('localhost') != -1) {
            baseUrl = location.protocol + '//' + 'localhost';
        } else {
            baseUrl = location.protocol + '//' + 'uc.fpwan.com';
        }
    }
    baseUrl = JONO_HOST
    var tools = {
        //加载js文件
        loadSingleScript: function (src, callback) {
            var s = document.createElement('script');
            s.async = false;
            s.src = src;
            s.addEventListener('load', function () {
                s.parentNode.removeChild(s);
                s.removeEventListener('load', arguments.callee, false);
                callback && callback();
            }, false);
            document.body.appendChild(s);
        },
        //读取cookie，判断某个cookie是否存在。
        //读取操作配合 unclekeith=21; sex=boy 这个cookie会更好理解读取cookie的操作。
        getCookie: function (name) {
            var cookieName = encodeURIComponent(name) + "=",
                cookieStart = document.cookie.indexOf(cookieName),
                cookieValue = null;
            if (cookieStart > -1) {
                var cookieEnd = document.cookie.indexOf(";", cookieStart);
                if (cookieEnd == -1) {
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length,
                    cookieEnd));
            }
            return cookieValue;
        },
        //写入cookie。
        setCookie: function (name, value, expires, path, domain, secure) {
            var cookieText = encodeURIComponent(name) + "=" +
                encodeURIComponent(value);
            if (expires instanceof Date) {
                cookieText += "; expires=" + expires.toGMTString();
            }
            if (path) {
                cookieText += "; path=" + path;
            }
            if (domain) {
                cookieText += "; domain=" + domain;
            }
            if (secure) {
                cookieText += "; secure";
            }
            document.cookie = cookieText;
        },
        //删除cookie
        unset: function (name, path, domain, secure) {
            tools.setCookie(name, "", new Date(0), path, domain, secure);
        },
        getQueryString: function (key) {
            var url = location.search || location.hash;
            var requestObj = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.slice(url.indexOf("?") + 1);
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    if (typeof requestObj[strs[i].split("=")[0]] == "undefined") requestObj[strs[i].split(
                        "=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
                }
            }
            if (key == undefined) {
                return requestObj;
            }
            return requestObj[key];
        }
    }

    tools.loadSingleScript("/sdk/fphdsdk.js?v=" + (new Date()).getTime(), init);

    var channelId = tools.getQueryString('channelId');
    var token = tools.getQueryString('token') || tools.getCookie('HALLTOKEN') || tools.getCookie('token');

    // 获取绑定信息
    var getGlobalPhone = baseUrl + '/user/getGlobalPhone';
    // 验证码
    var SendCode = baseUrl + '/sms/SendCode';
    // 点击绑定手机号
    var bindGlobalPhone = baseUrl + '/user/bindGlobalPhone';
    // 客服微信：
    document.getElementById('kfcode').innerText = _GAMECONFIG[this.channelId]['wxh'];

    function isInWechat() {
        // alert('请在微信环境下登录!')
        return navigator.userAgent.indexOf('MicroMessenger') !== -1;
    }


    // if (tools.getQueryString('token') != tools.getCookie('token')) {
    //     alert('跨渠道，请清理缓存');
    //     // return;
    // }

    function init() {
        FPHDSdk.login({
            channelId: channelId
        }, function (data) {
            if (data.code > 0) {
                alert(data.msg);
                return false;
            }
            console.log(data)
            token = data.token;
            document.getElementById('yzmid').innerText = data.userId;
            document.getElementById('yzmname').innerText = data.nickname;
            document.getElementById('getyzmid').innerText = data.userId;
            document.getElementById('getyzmname').innerText = data.nickname;
            var expires = new Date(new Date().getTime() + 86400 * 1000 * 7);
            tools.setCookie('HALLTOKEN', data.token, expires, '/');
            getInfo()
        });
    }


    function getInfo() {
        $.ajax({
            url: getGlobalPhone,
            type: "POST",
            data: {
                channelId: channelId,
                token: token
            },
            success: function (res) {
                if (res.code > 0) {
                    document.getElementById('register').style.display = 'block';
                } else {
                    document.getElementById('allget').style.display = 'block';
                    document.getElementById('yzmphone').innerText = res.data.phone;
                }
            },
            error: function () { }
        });
    }



    var mobile = $('.mobile').val();
    var times = 60;
    function roof() {
        var mobile = $('.mobile').val();
        if (!mobile) {
            $('.mobile').focus();
            alert('手机号不能为空')
            return
        } else if (times == 0) {
            $('#yanzhengma').text('发送验证码(' + times + 's)');
            $('#yanzhengma').prop('disabled', false);
            $('#yanzhengma').text('发送验证码');
            times = 60;
            return
        }
        $('#yanzhengma').text('重新发送(' + times + 's)');
        times--;
        setTimeout(roof, 1000);
    }

    $('#yanzhengma').on('click', function () {
        var mobile = $('.mobile').val();
        if (!(/^1[3456789]\d{9}$/.test(mobile))) {
            alert('手机格式不正确');
            return;
        }
        axios({
            method: 'post',
            url: SendCode,
            params: {
                channelId: channelId,
                mobile: mobile
            },
        }).then(function (res) {
            console.log(res)
            if (res.data.code > 0) {
                alert(res.data.msg);
                return;
            }
        })
        $(this).prop('disabled', true);
        roof();
    });



    $('#putres').on('click', function () {
        var mobile = $('.mobile').val();
        var yanzheng = $('#yanzheng').val();
        var mima = $('.mima').val();
        var repeatmima = $('.repeatmima').val();
        if (!mobile) {
            $('.mobile').focus();
            document.querySelector('.mobile').placeholder = '请填写手机号码';
            return
        }
        if (!yanzheng) {
            $('.yanzheng').focus();
            document.querySelector('.yanzheng').placeholder = '请填写验证码';
            return
        }
        axios({
            method: 'post',
            url: bindGlobalPhone,
            params: {
                channelId: channelId,
                phone: mobile,
                token: token,
                CAPTCHA: yanzheng
            },
        }).then(function (res) {
            if (res.data.code > 0) {
                alert(res.data.msg);
            }
            location.href = location.href + '&time=' + ((new Date()).getTime());
        })
        // $(this).prop('disabled',true);
    })

    $('#res-btn').on('click', function () {
        document.getElementById('register').style.display = 'block';
        document.getElementById('allget').style.display = 'none';
    });


</script>

</body>

</html>